import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class AglinDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('对齐与相对定位'),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Container(
            height: 120,
            width: 220,
            color: Colors.blue[50],
            child: Align(
              alignment: Alignment.topRight,
              child: FlutterLogo(
                size: 60,
              ),
            ),
          ),
          // widthFactor和heightFactor是用于确定Align组件本身宽高的属性；
          // 它们是两个缩放因子，会分别乘以子元素的宽、高，最终的结果就是Align组件的宽高
          // 当widthFactor或heightFactor为null时组件的宽高将会占用尽可能多的空间
          Align(
            widthFactor: 2,
            heightFactor: 2,
            alignment: Alignment.center,
            child: FlutterLogo(
              size: 60,
            ),
          ),
          Align(
            widthFactor: 2,
            heightFactor: 2,
            // Alignment会以矩形的中心点作为坐标原点
            alignment: Alignment(-0.5,-0.5),
            child: FlutterLogo(size: 60,),
          ),
          Align(
            widthFactor: 2,
            heightFactor: 2,
            alignment: FractionalOffset(0.2,0.6),
            child: FlutterLogo(size: 60,),
          )
        ],
      ),
    );
  }
}
